<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .highlight{
            background-color: red;
            color: #fff;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
            font-family: 楷体;
        }
        .bg-blue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- <table border="1" style="border-collapse: collapse; width: 90%;margin: 0 auto;text-align: center;">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>张三</td>
                <td>2301</td>
                <td>1班</td>
                <td>
                    <button onclick="deletestu(0)">删除</button>
                </td>
            </tr>
            <tr>
                <td>02</td>
                <td>张三</td>
                <td>2301</td>
                <td>1班</td>
                <td>
                    <button onclick="deletestu(1)">删除</button>
                </td>
            </tr>
            <tr>
                <td>03</td>
                <td>张三</td>
                <td>2301</td>
                <td>1班</td>
                <td>
                    <button onclick="deletestu(2)">删除</button>
                </td>
            </tr>
        </tbody>
    </table> -->
    <table border="1" style="border-collapse: collapse; width: 90%;margin: 0 auto;text-align: center;">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-blue">
                <td>01</td>
                <td>张三</td>
                <td>2301</td>
                <td>1班</td>
                <td>
                    <button onclick="highlightTr(0)">高亮</button>
                </td>
            </tr>
            <tr class="bg-blue">
                <td>02</td>
                <td>张三</td>
                <td>2301</td>
                <td>1班</td>
                <td>
                    <button onclick="highlightTr(1)">高亮</button>
                </td>
            </tr>
            <tr class="bg-blue">
                <td>03</td>
                <td>张三</td>
                <td>2301</td>
                <td>1班</td>
                <td>
                    <button onclick="highlightTr(2)">高亮</button>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        // function deletestu(index){
        //     let trs=document.querySelectorAll("tbody tr")
        //     if(confirm("确定删除?")){
        //         // 标签对象上的remove方法可以删除这个标签对象
        //         trs[index].remove();
        //     }
        // }
        let trs=document.querySelectorAll("tbody tr")
        function highlightTr(index){
            // trs[index].style="background-color:red;color:#fff;height:50px;font-size:20px;font-weight:bold;font-famliy:楷体;"
            // trs[index].setAttribute("style","background-color:red;color:#fff;height:50px;font-size:20px;font-weight:bold;font-famliy:楷体;")
            // trs[index].className+="highlight"
            // if(trs[index].classList.contains("highlight")){
            //     trs[index].classList.remove("highlight")
            // }else{
            //     trs[index].classList.add("highlight")
            // }
            trs[index].classList.toggle("highlight")
        }
    </script>
</body>
</html>